<template>
  <div id="app">
    <audio controls ref="audio" @timeupdate="timeupdate" preload="preload">
        <source :src="$store.state.list[$store.state.musicIndex].src" v-if="$store.state.list.length>0"> 您的浏览器不支持 audio 元素。
    </audio>
      <router-view v-if="!$route.meta.keepAlive"/>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {

    };
  },

  methods: {
    timeupdate() {
      const audio = document.querySelector('audio');
      if (audio.networkState == 1) {
        // audio.oncanplay=()=>{
        const currentTime = this.tos(audio.currentTime);
        const duration = this.tos(audio.duration);
        this.$store.commit('update', {
          tosCur: currentTime, tosDur: duration, cur: audio.currentTime, dur: audio.duration,
        });// 给vuex方法传参
        // }
      }
      if (audio.ended == true) {
        if (this.$store.state.xunhuan == false) { // 单曲循环
          audio.currentTime = 0;
        } else {
          this.nextClick();
        }
      }
    },
    nextClick() {
      const store = this.$store.state;
      if (store.list.length > 0) {
        if (store.musicIndex < store.list.length - 1) {
          store.musicIndex++;
          store.m = 0;// 下一首初始化歌词盒子的translateY移动
          store.action = 0;// 初始化索引
          this.time_list();
        } else if (store.musicIndex == store.list.length - 1) {
          store.musicIndex = 0;
          store.m = 0;// 下一首初始化歌词盒子的translateY移动
          store.action = 0;// 初始化索引
          this.time_list();
        }
      }
      this.load();
      this.getImg();// 获取背景图
      if (store.list[store.musicIndex].src == '') {
        this.nextClick();
      }
      this.gundong();
      this.$store.state.bof = store.list[store.musicIndex].hash;// 标识当前播放
      if (store.musicIndex == store.list.length - 1) {
        store.play = false;
        this.btnState = false;
      }
      this.hongxin();
    },
    hongxin() {
      const store = this.$store.state;
      store.aixin = false;
      if (localStorage.getItem('list4') == null) {
        localStorage.setItem('list4', '[]');
      } else {
        const arr3 = JSON.parse(localStorage.getItem('list4'));
        const hash = this.$store.state.bof;
        for (let i = 0; i < arr3.length; i++) {
          if (arr3[i].hash == hash) {
            store.aixin = true; break;
          }
        }
      }
    },
    gundong() {
      const store = this.$store.state;
      setTimeout(() => {
        if (store.list[store.musicIndex].lyric.length != 0) {
          // 获取自适应的歌词li高度
          // this.$store.state.liHeight=this.$refs.geci_li[0].offsetHeight;
          const arr = [];
          let demo = 0;
          document.querySelectorAll('.geci_li').forEach((item) => {
            demo += item.offsetHeight;
            arr.push(demo);
          });
          this.$store.state.liHeight = arr;
          // 把歌词盒子对象传到vuex处理
          this.$store.state.ge = document.querySelector('.geci_list');
        } else {
          this.$store.state.liHeight = 0;
          this.$store.state.ge = null;
        }
      }, 100);
    },
    time_list() {
      const timeList = [];// 把[00:00.0]时间转化为保留两位小数的秒数
      if (this.$store.state.list[this.$store.state.musicIndex].lyric.length != 0) {
        for (const i in this.$store.state.list[this.$store.state.musicIndex].lyric) {
          // 根据前面两位数*60得出秒数+后面的秒数
          timeList.push(parseFloat((this.$store.state.list[this.$store.state.musicIndex].lyric[i].time).substr(1, 3)) * 60 + parseFloat((this.$store.state.list[this.$store.state.musicIndex].lyric[i].time).substr(4, 9)));
        }
        this.$store.state.timeList = timeList;
      }
    },
    load() {
      const audio = document.querySelector('audio');
      audio.load();
      audio.oncanplay = () => { // 歌缓存到可以播放的时候
        audio.play();
        this.btnState = true;
        this.$store.state.play = true;
        const duration = this.tos(audio.duration);
        this.$store.commit('duration', duration);
      };
    },
    getImg() {
      const store = this.$store.state;
      document.styleSheets[0].addRule('.about::before', `background: transparent url(${store.list[store.musicIndex].img})center center no-repeat`);
      document.styleSheets[0].insertRule(`.about::before { background: transparent url(${store.list[store.musicIndex].img})center center no-repeat }`, 0);
    },
    tos(endTime) {
      	// 将秒转化为时分秒
      	  let secondTime = parseInt(endTime);// 将传入的秒的值转化为Number
      	  let min = 0;// 初始化分
      	  let h = 0;// 初始化小时
      	  let result = '';
      	  if (secondTime > 60) { // 如果秒数大于60，将秒数转换成整数
      		min = parseInt(secondTime / 60);// 获取分钟，除以60取整数，得到整数分钟
      		secondTime = parseInt(secondTime % 60);// 获取秒数，秒数取佘，得到整数秒数
      		if (min > 60) { // 如果分钟大于60，将分钟转换成小时
      		  h = parseInt(min / 60);// 获取小时，获取分钟除以60，得到整数小时
      		  min = parseInt(min % 60); // 获取小时后取佘的分，获取分钟除以60取佘的分
      		}
      	  }
      	  if (h == 0) {
      		  result = `${min.toString().padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`;
      	  } else {
      		  result = `${h.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`;
      	  }
      	  return result;
    },

  },
  mounted() {
    const audio = document.querySelector('audio');
    audio.oncanplay = () => {
      const duration = this.tos(audio.duration);
      this.$store.commit('duration', duration);// 时长
    };
    audio.volume = 1;
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        // console.log('后台')
        if (this.$store.state.play == true) {
          audio.play();
        } else {
          audio.pause();
        }
      } else {
        // console.log('前台')
      }
    });
  },
};
</script>
<style lang="scss">
 audio{
    display: none;
    }
</style>
